<template>
  <div class="internationalorders">
    <div class="top">
      <el-form ref="orderquery" :model="orderquery" size="mini" :label-position="labelPosition">
        <div style="display: flex; margin: 0 0 10px 0">
          <!-- <el-form-item
            label="联系号码"
            style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.phone"></el-input>
          </el-form-item> -->
          <el-form-item label="乘机人员" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.flightCrew"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" style="display: flex; margin: 0 30px 0 0">
            <el-select size="mini" v-model="orderquery.orderCode" placeholder="请选择订单状态" clearable>
              <el-option v-for="item in orderstatusList" :key="item.id" :label="item.names" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="PNR" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.pnr"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="预定人员 " style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.bookingStaff"></el-input>
          </el-form-item>
          <el-form-item label="预定时间 " style="display: flex; margin: 0 30px 0 0">
            <el-date-picker :value-format="format" placeholder="选择日期" size="mini" style="width: 150px"
              v-model="orderquery.reserveForward" type="date">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="至 " style="display: flex; margin: 0 30px 0 0">
            <el-date-picker :value-format="format" placeholder="选择日期" size="mini" style="width: 150px"
              v-model="orderquery.reserveBack" type="date">
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item
            label="票号  "
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-input v-model="orderquery.ticketNum"></el-input>
          </el-form-item> -->
        </div>
        <div style="display: flex; margin: 0 0 10px 0">
          <el-form-item label="订单编号" style="display: flex; margin: 0 30px 0 0">
            <el-input v-model="orderquery.orderNum"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="航班号 "
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-input v-model="orderquery.flightNum"></el-input>
          </el-form-item> -->
          <el-form-item label="起飞时间 " style="display: flex; margin: 0 30px 0 0">
            <el-date-picker :value-format="format" placeholder="选择日期" size="mini" style="width: 150px"
              v-model="orderquery.departureTime" type="date">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 0 0 10px 80%">
          <el-button size="mini" type="primary" @click="immediatelyquery">立即查询</el-button>
          <el-button size="mini" type="primary" @click="orderimport">新建订单导入</el-button>
        </div>
      </el-form>
    </div>
    <div>
      <el-table size="mini" :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="dataList" border>
        <el-table-column prop="orderid" label="订单编号"> </el-table-column>
        <el-table-column prop="passengerCount" label="乘客人数">
        </el-table-column>
        <!-- <el-table-column width="100px" prop="sumamount" label="乘机人 ">
        </el-table-column> -->
        <el-table-column width="100px" prop="pnr" label="PNR ">
        </el-table-column>
        <el-table-column prop="time" label="起飞时间-到达时间">
        </el-table-column>
        <el-table-column width="100px" prop="departuretime" label="出票商 ">
        </el-table-column>
        <el-table-column width="100px" prop="creatoremployeeid" label="预定员 ">
        </el-table-column>
        <el-table-column width="130px" prop="status" label="订单状态">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 'unpaid'">未支付</template>
            <template v-if="scope.row.status == 'failPay'">支付失败</template>
            <template v-if="scope.row.status == 'payments'">支付中</template>
            <template v-if="scope.row.status == 'payd'"> 支付成功</template>
            <template v-if="scope.row.status == 'ticketing'">出票成功</template>
            <template v-if="scope.row.status == 'refundTicketSuccess'">退票成功</template>
            <template v-if="scope.row.status == 'waitPay'">等待支付</template>
            <template v-if="scope.row.status == 'cancelOrder'">取消订单</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="detailsList(scope.$index, scope.row)">详情</el-button>
            <el-button v-if="scope.row.status == 'unpaid' || scope.row.status == 'failPay'" size="mini" type="primary"
              @click="topayfor(scope.$index, scope.row)">去支付</el-button>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="cancelorder(scope.$index, scope.row)">取消订单</el-button> -->
            <!-- <el-button size="mini" type="primary"  @click="handleChange(scope.$index, scope.row), (changeOrder = true)">改签</el-button> -->
            <!-- <el-button size="mini" type="primary">修改</el-button> -->
            <el-button v-if="scope.row.status == 'payd' || scope.row.status == 'ticketing'" size="mini" type="primary"
              @click="handleDetails(scope.$index, scope.row)">退票</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "internationalorders",
    data() {
      return {
        // 分页
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        format: "yyyy-MM-dd",
        labelPosition: "left",
        dataList: [],
        // 订单状态
        orderstatusList: [{
            id: "unpaid",
            names: "未支付",
          },
          {
            id: "payments",
            names: "支付中",
          },
          {
            id: "payd",
            names: "支付成功",
          },
          {
            id: "ticketing",
            names: "出票成功",
          },
          {
            id: "refundTicketSuccess",
            names: "退票成功",
          },
          {
            id: "cancelOrder",
            names: "取消订单",
          },
        ],
        // 查询条件
        orderquery: {
          phone: "",
          flightCrew: "",
          orderCodeA: "",
          pnr: "",
          bookingStaff: "",
          reserveForward: "",
          reserveBack: "",
          orderNum: "",
          flightNum: "",
          ticketNum: "",
          departureTime: "",
        },
      };
    },

    methods: {
      // 退票按钮
      handleDetails(row, index) {
        this.$router.push({
          name: "internationalticket",
          params: {
            ticketid: index.id
          },
        });
      },
      // 详情按钮
      detailsList(row, index) {
        console.log(row, index);
        this.$router.push({
          name: "detail",
          params: {
            ticketid: index.id
          }
        });
      },
      // 新建订单
      orderimport() {
        this.$router.push({
          name: "orderimport",
        });
      },
      // 去支付
      topayfor(row, index) {
        console.log(row, index.id);
        // if(index.id==''){
        //   this.$message.error('当前状态不支持支付');
        // }else{

        // }
        this.$router.push({
          name: "gopay",
          params: {
            ticketid: index.id
          }
        });
      },
      // 查询条件
      immediatelyquery() {
        this.gettmpIflightOrderVoList();
      },
      //列表数据
      gettmpIflightOrderVoList() {
        this.$axios
          .gettmpIflightOrderVoList({
            phone: this.orderquery.phone,
            // 乘机人
            flightCrew: this.orderquery.flightCrew,
            // 订单状态
            orderCode: this.orderquery.orderCode,
            pnr: this.orderquery.pnr,
            // 预定人员
            bookingStaff: this.orderquery.bookingStaff,
            // 预定时间前
            reserveForward: this.orderquery.reserveForward,
            // 预定时间后
            reserveBack: this.orderquery.reserveBack,
            // 订单编号
            orderNum: this.orderquery.orderNum,
            // 航班号
            flightNum: this.orderquery.flightNum,
            // 票号
            ticketNum: this.orderquery.ticketNum,
            // 起飞时间
            departureTime: this.orderquery.departureTime,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.total = res.total;
              this.dataList = res.data;
            } else {
              this.$message.error("查无次信息");
            }
          })
          .catch((err) => {
            this.$message.error("查无次信息");
            console.log(err);
          });
      },
      // 分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getselectCaseMine();
        this.pageSize = value;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getselectCaseMine();
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getselectCaseMine();
        // orders = res.data;
      },
    },
    mounted() {
      // 列表数据
      this.gettmpIflightOrderVoList();
    },
  };
</script>

<style scoped>
  .internationalorders {
    margin: 20px;
  }
</style>